<template>
  <div>
    <dialog-content :dialogOptions="dialogOptions || (new Date().getTime())">
      <template slot="dialog-content_content">
        <form-content ref="scheduledInfoForm" :formOptions="formOptions" :formSource="formSource" @changeHandle="changeHandle">
        </form-content>
      </template>
      <template slot="dialog-content_footer">
        <el-button v-if="isAuth('config:ip:save')" type="primary" v-prevent-re-click
         :size="this.size" @click="analysisHandle">IP解析</el-button>
        <el-button v-if="add && isAuth('config:ip:save')" type="primary" v-prevent-re-click
         :size="this.size" @click="submitHandle('save')">保 存</el-button>
        <el-button v-if="change && isAuth('config:ip:update')" type="primary" v-prevent-re-click
         :size="this.size" @click="submitHandle('edit')">修 改</el-button>
        <el-button v-if="change && isAuth('config:ip:delete')" type="danger" v-prevent-re-click
         :size="this.size" @click="submitHandle('delete')">删 除</el-button>
        <el-button :size="this.size" @click="dialogOptions.show = false">取 消</el-button>
      </template>
    </dialog-content>
  </div>
</template>

<script>
import { getIPInfoApi, saveIPApi, updateIPApi, deleteIPApi, getIPAnalysisApi } from '@/api/ip'
import DialogContent from '@/components/common/dialog-content'
import FormContent from '@/components/common/form-content'
export default {
  components: { DialogContent, FormContent },
  props: {
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      dialogOptions: {
        title: 'IP配置信息',
        show: false,
        modal: true,
        width: '590px',
        height: '360px',
        center: true
      },
      formOptions: {
        inline: true,
        labelPosition: 'right',
        labelWidth: '80px',
        size: this.size
      },
      formSource: {
        operations: [
          {
            name: 'IP',
            key: 'ip',
            type: 'text',
            width: '185px',
            length: 15
          },
          {
            name: '国家',
            key: 'country',
            type: 'text',
            width: '185px',
            length: 10
          },
          {
            name: '省',
            key: 'province',
            type: 'text',
            width: '185px',
            length: 10
          },
          {
            name: '城市',
            key: 'city',
            type: 'text',
            width: '185px',
            length: 10
          },
          {
            name: '服务商',
            key: 'isp',
            type: 'text',
            width: '460px',
            length: 100
          },
          {
            name: '创建人',
            key: 'createName',
            type: 'text',
            width: '185px',
            disabled: true
          },
          {
            name: '创建时间',
            key: 'createTime',
            type: 'datetime',
            width: '185px',
            disabled: true
          },
          {
            name: '修改人',
            key: 'updateName',
            type: 'text',
            width: '185px',
            disabled: true
          },
          {
            name: '修改时间',
            key: 'updateTime',
            type: 'datetime',
            width: '185px',
            disabled: true
          },
          {
            name: '白名单',
            key: 'white',
            type: 'switch',
            width: '35px'
          },
          {
            name: '黑名单',
            key: 'black',
            type: 'switch',
            width: '35px'
          },
          {
            name: '系统',
            key: 'system',
            type: 'switch',
            width: '35px'
          },
          {
            name: '备注',
            key: 'remark',
            type: 'textarea',
            width: '460px',
            length: 500
          }
        ],
        ruleForm: {},
        rules: {
          ip: [{ required: true, message: 'IP不能为空', trigger: 'blur' }]
        }
      },
      type: 0 // 0新增1查看
    }
  },
  computed: {
    add: {
      get() { return this.type === 0 }
    },
    change: {
      get() { return this.type === 1 }
    }
  },
  methods: {
    init(type = 0, id = 0) {
      this.type = type
      if (id !== 0 && type === 1) {
        getIPInfoApi(id).then(res => {
          let data = res.data
          this.formSource.ruleForm = {
            id: data.id,
            createName: data.createName,
            createTime: data.createTime ? this.$time.formatDate(data.createTime, 'yyyy-MM-dd HH:mm:ss') : '',
            updateName: data.updateName,
            updateTime: data.updateTime ? this.$time.formatDate(data.updateTime, 'yyyy-MM-dd HH:mm:ss') : '',
            ip: data.ip,
            country: data.country,
            province: data.province,
            city: data.city,
            isp: data.isp,
            white: data.white,
            black: data.black,
            system: data.system,
            remark: data.remark
          }
        }).then(res => {
          this.controlInit(type)
          this.flushForm(this)
        })
      } else {
        this.formSource.ruleForm = {
          id: '0',
          ip: '',
          country: '',
          province: '',
          city: '',
          isp: '',
          white: false,
          black: false,
          system: false,
          remark: ''
        }
        this.controlInit(type)
        this.flushForm(this)
      }
    },
    flushForm(target) {
      if (target.$refs.scheduledInfoForm === undefined) {
        target.$nextTick(() => {
          target.$refs.scheduledInfoForm.init()
        })
      } else {
        if (this.type === 0) {
          target.$refs.scheduledInfoForm.init()
        } else {
          target.$refs.scheduledInfoForm.update()
          target.$refs.scheduledInfoForm.clearValidate()
        }
      }
    },
    changeHandle(obj) {},
    initHeight() {
      if (this.type === 0) {
        return 260
      } else if (this.type === 1) {
        return 360
      }
    },
    dynamicHeight() {
      let height = this.dialogOptions.height
      height = height.substr(0, height.length - 2)

      let initHeight = this.initHeight()
      height = initHeight
      this.dialogOptions.height = height + 'px'
    },
    controlInit(type) {
      this.dynamicHeight()

      this.formSource.operations.forEach(item => {
        if (item.key === 'createName' || item.key === 'createTime' || item.key === 'updateName' || item.key === 'updateTime' ||
          item.key === 'status' || item.key === 'executionStatus' || item.key === 'executionLastTime') {
          if (type === 0) {
            item.show = false
          } else {
            item.show = true
          }
        }
        if (type === 1 && item.key === 'ip') {
          item.disabled = true
        }
      })
    },
    analysisHandle() {
      let ip = this.formSource.ruleForm.ip
      if (ip === null || ip.length === 0) return false

      getIPAnalysisApi(ip).then(res => {
        if (res.status !== 200) {
          return
        }
        let data = res.data
        this.$set(this.formSource.ruleForm, 'country', data.country)
        this.$set(this.formSource.ruleForm, 'province', data.province)
        this.$set(this.formSource.ruleForm, 'city', data.city)
        this.$set(this.formSource.ruleForm, 'isp', data.isp)
      })

      return true
    },
    submitHandle(type = '') {
      if (type === '') return false
      if (!this.$refs.scheduledInfoForm.submitForm()) return false

      if (type === 'save') {
        saveIPApi(this.formSource.ruleForm).then(res => {
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 1500
          })
          this.dialogOptions.show = false
          this.$emit('flush')
        }).catch(() => {
          this.$message({
            message: '添加失败',
            type: 'error',
            duration: 1500
          })
        })
      } else if (type === 'edit' && this.formSource.ruleForm.id !== '0') {
        updateIPApi(this.formSource.ruleForm).then(res => {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1500
          })
          this.dialogOptions.show = false
          this.$emit('flush')
        }).catch(() => {
          this.$message({
            message: '修改失败',
            type: 'error',
            duration: 1500
          })
        })
      } else if (type === 'delete' && this.formSource.ruleForm.id !== '0') {
        deleteIPApi(this.formSource.ruleForm.id).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1500
          })
          this.dialogOptions.show = false
          this.$emit('flush')
        }).catch(() => {
          this.$message({
            message: '删除失败',
            type: 'error',
            duration: 1500
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
